<template>
  <page-loading :show="pageLoading">
    <view>
      <view class="container" v-if="info">
        <view class="header">
          <view class="header-left">
            <i-icon
              :icon="statusIcon[info.quote_Status]"
              type="single"
              size="34rpx"
              color="#333"
            ></i-icon>
            <text class="text">{{ status[info.quote_Status] }}</text>
          </view>
          <view class="header-right" v-if="info.carPartOffer.is_buyer_query">
            <i-icon
              icon="iconchakan"
              type="single"
              size="24rpx"
              color="#666"
            ></i-icon>
            <text class="text">买方已查看</text>
          </view>
          <view class="header-right" v-else>
            <i-icon
              icon="iconbiyan"
              type="single"
              size="24rpx"
              color="#fff"
            ></i-icon>
            <text class="text">买方未查看</text>
          </view>
        </view>

        <!-- 车型模块 -->
        <view class="order" v-if="info">
          <view class="item flex" :class="info.vin_No ? '' : 'vin'">
            <view class="item-left">车型：</view>
            <view class="item-right name"
              >{{ info.brand_Name }} {{ info.car_Type_Name }}
              {{ info.configuration_Name }}</view
            >
          </view>
          <view class="item flex vin" v-if="info.vin_No">
            <view class="item-left">VIN:</view>
            <view class="item-right">{{ info.vin_No }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">询价主体：</view>
            <view class="item-right">
              <text>{{ info.store_Name }}</text>
              <i-icon
                v-if="info.store_Status"
                class="icon-store"
                icon="iconmendianrenzheng"
                type="single"
                size="32rpx"
                color="#60C534"
              ></i-icon>
              <i-icon
                v-if="info.deposit_Balance > 0"
                class="icon-store"
                icon="iconbao_1"
                type="single"
                size="28rpx"
                color="#eb5c02"
              ></i-icon>
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">联系人：</view>
            <view class="item-right">{{ formatName }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">联系电话：</view>
            <view class="item-right flex flex-jc-sb">
              <text>{{ formatPhone }}</text>
              <text class="phone-tip">报价后可见联系买方</text>
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">收货地址：</view>
            <view class="item-right"
              >{{ info.receiver_Address_Json.province
              }}{{ info.receiver_Address_Json.city
              }}{{ info.receiver_Address_Json.district
              }}{{ info.receiver_Address_Json.address }}</view
            >
          </view>
          <view class="item flex">
            <view class="item-left">询价日期：</view>
            <view class="item-right">{{ dateFormat(info.addTime) }}</view>
          </view>
          <view class="item flex">
            <view class="item-left">截至日期：</view>
            <view class="item-right">{{
              dateFormat(info.effective_Time)
            }}</view>
            <view class="last-time">
              {{ remainder }}
            </view>
          </view>
          <view class="item flex">
            <view class="item-left">发票信息：</view>
            <view class="item-right">{{
              info.is_Need_Invoice ? '需开发票' : '不需开票'
            }}</view>
          </view>
        </view>

        <!-- 询价清单 -->
        <view class="enMolder">
          <view class="enMolder-head">询价清单</view>
          <view
            class="enMolder-item"
            v-for="(item, index) in info.carPartDetails"
            :key="index"
          >
            <view class="enMolder1">
              <view class="en-left">
                <view class="en-left-num">
                  <view class="en-num">{{ index + 1 }}</view>
                </view>
                <view class="en-name">{{ item.part_Category_Name }}</view>
              </view>
              <view class="en-right">x{{ item.purchase_Number }}</view>
            </view>
            <view class="enMolderImg" v-if="item.images">
              <image
                v-for="img in handdleImg(item.images)"
                :key="img"
                :src="img"
              ></image>
            </view>
            <view class="enMolder2">
              <view class="en-left">说明:</view>
              <view class="en-right text-line2">{{ item.explain_Text }}</view>
            </view>
            <view class="qualitybox">
              <view class="en-left">品质:</view>
              <view class="en-right">{{ quality[item.character_type] }}</view>
            </view>
            <view class="enMolderfooter">
              <view class="enMolderfooter-left">我的报价:</view>
              <view class="enMolderfooter-right">{{ item.offer_price }}元</view>
            </view>
          </view>
        </view>

        <!--     其他信息 -->
        <view class="other">
          <view class="title">其他信息</view>
          <view class="item">
            <view class="item-left">报价人：</view>
            <view class="item-right">{{ info.carPartOffer.contactName }}</view>
          </view>
          <view class="item">
            <view class="item-left">运费价格：</view>
            <view class="item-right price"
              >￥{{ info.carPartOffer.freight_price }}</view
            >
          </view>
          <view class="item">
            <view class="item-left">发票：</view>
            <view class="item-right">{{
              info.carPartOffer.is_Need_Invoice ? '需要发票' : '不需发票'
            }}</view>
          </view>
          <view class="item">
            <view class="item-left">报价截止：</view>
            <view class="item-right">{{
              dateFormat(info.carPartOffer.effective_time, 'YYYY-MM-DD HH:mm')
            }}</view>
            <view class="last-time">
              {{ quoteRemainder }}
            </view>
          </view>
          <view class="item">
            <view class="item-left">商家备注：</view>
            <view class="item-right">{{ info.carPartOffer.remarks }}</view>
          </view>
        </view>

        <!--    浏览信息-->
        <view class="browse flex flex-ai-c flex-jc-sb boxS">
          <view>
            <text class="num">{{ info.browse_Number }}次</text>浏览/
            <text class="num">{{ info.quote_Number }}次</text>参与报价
          </view>
          <view
            class="browse-right flex"
            v-if="info.quote_Number > 0"
            @click="quoteMember"
          >
            <image
              v-for="(img, index) in info.carPartOffer.headPortraitArray"
              :key="img"
              :src="img"
            ></image>
            <u-icon
              name="arrow-right"
              color="#666"
              size="26rpx"
              class="pl-15"
            ></u-icon>
          </view>
        </view>

        <!--      推荐询单列表-->
        <view class="recommend" v-show="showRecommend">
          <view class="recommend-title">继续报价</view>
          <list-card
            v-for="(item, index) in recommendList"
            :key="index"
            :info="item"
          ></list-card>
        </view>

        <view class="btn-wrap flex" v-if="info.quote_Status !== 25">
          <view
            class="btn-left btn flex flex-dir-c flex-jc-c flex-ai-c"
            @click="edit"
          >
            <i-icon
              icon="iconqiyebianji"
              type="single"
              size="34rpx"
              color="#FFE23E"
            ></i-icon>
            <text>编辑报价</text>
          </view>
          <view
            class="btn-center btn flex flex-dir-c flex-jc-c flex-ai-c"
            @click="chart"
          >
            <i-icon
              icon="iconxiaoxi"
              type="single"
              size="34rpx"
              color="#FFE23E"
            ></i-icon>
            <text>在线咨询</text>
          </view>
          <view class="btn-right btn" @click="call">
            <i-icon
              icon="iconlianxi"
              type="single"
              size="28rpx"
              color="#333"
            ></i-icon>
            <text class="btn-right-text">电话咨询</text>
          </view>
        </view>
      </view>
    </view></page-loading
  >
</template>

<script src="./myQuoteDetail.js"></script>
<style lang="scss" scoped>
@import './myQuoteDetail.scss';
</style>
